const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production', // 开发阶段 是不用去分包的 。
  entry: {
    page1: './src/page1',
    page2: './src/page2',
  },
  output: {
    filename: '[name].[hash:5].js',
  },
  optimization: {


    // 默认缓存组 仅将 异步导入 且被多个chunk（就是多个入口依赖）引用的模块 进行分包。


    // 分割 chunk  将 公共模块 新成一个新的chunk
    splitChunks: {
      // 分包全局配置
      //分包配置
      chunks: 'all', // 哪些 chunk 需要用到分包策略 默认是 async ：哪些 懒加载的 chunk 才会用到分包策略
      // maxSize: 60000 // 当某个 要分离的 chunk 大于 60000 字节webpack 就会尽量再 把这个 chunk 再分包
      // 分包的 基础是模块 一个单独的模块是没法  再切分的 比如 lodash  lodash 是一个整体 没法再切分了
      // 有些浏览器 支持多线程 并行下载 就可以多切分chunk
      // automaticNameDelimiter: ".", // 控制新chunk的名字分割符合
      // minChunks: 1, // 一个模块 被多个chunk 引用了 才会 去分包 默认1
      // minSize: 0 // 但一个模块 小于 多少字节 就不会去分包 这就避免 自己写的模块 被分出去
      cacheGroups: {
        // 缓存组
        styles: {
          minSize: 0, // 为了方便些0
          test: /\.css$/,
          minChunks: 2, // 最小有2个 chunk 引用了这个模块才会 去分包
        },

        // 默认就有这两个缓存组 写没写 都有
        // 属性名是缓存组名称，会影响到分包的chunk名
        // 属性值是缓存组的配置，缓存组继承所有的全局配置，也有自己特殊的配置
        vendors: {
          // 缓存组 名称 会影响 chunk名称
          // 会继承全局配置
          test: /[\\/]node_modules[\\/]/, // 当匹配到相应模块时，将这些模块进行单独打包
          priority: -10, // 缓存组优先级，优先级越高，该策略越先进行处理，默认值为0
        },
        default: {
          minChunks: 2, // 覆盖全局配置，将最小chunk引用数改为2
          priority: -20, // 优先级
          reuseExistingChunk: true, // 重用已经被分离出去的chunk
        },
      },
    },
  },
  module: {
    rules: [{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].[hash:5].css',
      chunkFilename: 'common.[hash:5].css', // 控制css 被分包出去的文件名字
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      chunks: ['page1'],
    }),
  ],
  stats: {
    colors: true,
    chunks: false,
    modules: false,
  },
};
